<template>
  <el-dialog
    width="500px"
    :title="title"
    :visible="dialogVisible"
    @close="closeFn"
  >
    <el-form
      ref="form"
      :model="permissionList"
      label-width="80px"
      :rules="rules"
    >
      <el-form-item label="权限名称" prop="name">
        <el-input size="mini" v-model="permissionList.name"></el-input>
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input size="mini" v-model="permissionList.code"></el-input>
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="permissionList.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="开启">
        <el-switch
          v-model="permissionList.enVisible"
          active-value="1"
          active-color="#5c9cf1"
          inactive-value="0"
        >
        </el-switch>
      </el-form-item>

      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" type="primary" @click="onSubmit">
              确定
            </el-button>
            <el-button size="mini" @click="closeFn()">取消</el-button></el-col
          >
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  addPermissionApi,
  detaPermissionApi,
  editPermissionApi,
} from "@/api/permission";
export default {
  props: {
    dialogVisible: {
      default: false,
      type: Boolean,
    },
    fid: {
      type: Number,
    },
    numType: {
      type: Number,
    },
  },
  computed: {
    title() {
      return this.permissionList.id ? "编辑权限" : "新增权限";
    },
  },

  //   data 函数返回的初始化数据是响应式的，而通过 props 传递的数据默认不是响应式的。要用watch侦听器
  watch: {
    fid(newValue) {
      this.permissionList.pid = newValue;
    },
    numType(newValue) {
      this.permissionList.type = newValue;
    },
  },
  data() {
    return {
      permissionList: {
        name: "",
        code: "",
        description: "",
        enVisible: "0",
        pid: "",
        type: "",
      },

      rules: {
        name: [
          { required: true, message: "权限名称不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "权限标识不能为空", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 权限新增编辑弹层中的确定按钮
    onSubmit() {
      this.$refs.form.validate(async (isOk) => {
        if (isOk) {
          if (this.permissionList.id) {
            // 有id是编辑模式
            await editPermissionApi(this.permissionList);
          } else {
            await addPermissionApi(this.permissionList);
            this.$message.success("添加成功");
          }

          this.$parent.getPermissionListFn();
          this.closeFn();
        }
      });
    },
    // 右上角关闭 和 取消关闭弹窗
    closeFn() {
      this.$emit("update:dialogVisible", false);
      this.$refs.form.resetFields();

      this.permissionList = {
        name: "",
        code: "",
        description: "",
        enVisible: "0",
        pid: "",
        type: "",
      };
    },
    // 数据回显
    async detaPermissionApi(id) {
      const res = await detaPermissionApi(id);
      this.permissionList = res;
      // this.loading = false;
    },
  },
};
</script>
<style scoped></style>
